<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>天猫tmall.com--理想生活上天猫</title>
		<link rel="stylesheet" type="text/css" href="css/top.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<link rel="stylesheet" type="text/css" href="css/sideBar.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.css"/>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
		</script>
	</head>
	<body>
		<!-- 导航栏 -->
		<div id="top">
			<div id="nav">
				<div id="left">
					<span>喵，欢迎来到天猫</span>
					<a href="#">请登陆</a>
					<a href="#">免费注册</a>
				</div>
				<div id="right">
					<!-- 我的淘宝 -->
					<div class="menu menuTop" id="myTb">
						<a href="https://www.tmall.com/">我的淘宝</a>
						<div class="menuDown">
							<a href="#">已买到的宝贝</a>
							<a href="#">已卖出的宝贝</a>
						</div>
					</div>
					<!-- 购物车 -->
					<div class="menu">
						<a href="#">
							<i class="fa fa-shopping-cart" style="color: #FF0036;font-size: 15px;"></i>
							购物车<span>0</span>件
						</a>
					</div>
					<!-- 收藏夹 -->
					<div class="menu menuTop" id="like">
						<a href="#">收藏夹
							<i class="fa fa-caret-down triDown" style="display: inline-block;"></i>
						</a>
						<div class="menuDown">
							<a href="#">收藏的宝贝</a>
							<a href="#">收藏的店铺</a>
						</div>
					</div>
					<!-- 手机版 -->
					<div class="menu" id="phone">
						<a href="#">
							<i class="fa fa-mobile-phone" style="color: #FF0036;font-size: 15px;"></i>
							手机版
						</a>
						<div class="menuDown">
							<img src="img/网站logo/二维码.png" alt="二维码">
						</div>
					</div>
					<!-- 淘宝网 -->
					<div class="menu">
						<a href="#">淘宝网</a>
					</div>
					<!-- 商家支持 -->
					<div class="menu menuTop" id="support">
						<a href="#">商家支持
							<i class="fa fa-caret-down triDown triDown" style="display: inline-block;"></i>
						</a>
						<div class="menuDown">
							<p>商家：</p>
							<ul>
								<li><a href="#">商家中心</a></li>
								<li><a href="#">商家入住</a></li>
								<li><a href="#">商家品控</a></li>
								<li><a href="#">天猫智库</a></li>
								<li><a href="#">天猫规则</a></li>
								<li><a href="#">运营服务</a></li>
								<li><a href="#">商家工具</a></li>
								<li><a href="#">喵言喵语</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 主体部分 -->
		<div id="main">
			<!-- logo+搜索 -->
			<div id="head">
				<div id="logo">
					<a href="https://www.tmall.com"><img src="img/网站logo/天猫logo.gif" ></a>
				</div>
				<!-- 搜索框 -->
				<div id="search">
					<div id="box">
						<div id="searchTxt">
							<input type="text" id="txt" placeholder="搜索 天猫 商品/品牌/店铺">
						</div>
						<div id="searchBtn">
							<input type="submit" id="btn" value="搜&ensp;索"/>
						</div>
					</div>
					<div id="searchKey">
						<ul>
							<li><a href="#">针织衫</a><span>&ensp;|</span></li>
							<li><a href="#">连衣裙</a><span>&ensp;|</span></li>
							<li><a href="#">四件套</a><span>&ensp;|</span></li>
							<li><a href="#">摄像头</a><span>&ensp;|</span></li>
							<li><a href="#">客厅灯</a><span>&ensp;|</span></li>
							<li><a href="#">口红</a><span>&ensp;|</span></li>
							<li><a href="#">手机</a><span>&ensp;|</span></li>
							<li><a href="#">运动鞋</a><span>&ensp;|</span></li>
							<li><a href="#">牛奶</a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 商品分类 -->
			<div id="pro">
				<div id="kind">
					<p>商品分类</p>
					<div id="kindList">
						<ul>
							<li><a href="#"><i class="iconfont icon-nvzhuangneiyi">&ensp;</i>女装/内衣</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-nanzhuang">&ensp;</i>男装/运动户外</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-xie">&ensp;</i>女装/男鞋/箱包</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-meirongxihu">&ensp;</i>美妆/个人护理</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-zhubaoshipin">&ensp;</i>腕表/眼镜/珠宝饰品</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-shouji">&ensp;</i>手机/数码/电脑办公</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-muyingwanju">&ensp;</i>母婴玩具</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-shipin">&ensp;</i>零食/茶酒/进口食品</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-shengxianshuiguo">&ensp;</i>生鲜水果</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-10">&ensp;</i>大家电/生活电器</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-jiajujiancai">&ensp;</i>家居建材</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-qiche">&ensp;</i>汽车/配件/用品</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-jiafangjiashi">&ensp;</i>家纺/家饰/鲜花</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-medicine">&ensp;</i>医药保健</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-chujushouna">&ensp;</i>厨具/收纳/宠物</a><div class="hide"></div></li>
							<li><a href="#"><i class="iconfont icon-tushuyinxiang">&ensp;</i>图书音像</a><div class="hide"></div></li>
						</ul>
					</div>
					<div class="hide" id="hide"></div>
				</div>
				<div id="link">
					<a href="#"><img src="img/网站logo/天猫超市.png" alt=""></a>
					<a href="#"><img src="img/网站logo/天猫国际.png" alt=""></a>
					<a href="#">天猫会员</a>
					<a href="#">电器城</a>
					<a href="#">喵鲜生</a>
					<a href="#">医药馆</a>
					<a href="#">营业厅</a>
					<a href="#">魅力惠</a>
					<a href="#">飞猪旅行</a>
					<a href="#">苏宁易购</a>
				</div>
			</div>
			<!-- 轮播图 -->
			<div id="imgs">
				<div id="bigImg">
					<img class="big" src="img/轮播图/大图/轮播大图1.jpg" >
					<img class="big" src="img/轮播图/大图/轮播大图2.jpg" >
					<img class="big" src="img/轮播图/大图/轮播大图3.jpg" >
					<img class="big" src="img/轮播图/大图/轮播大图4.jpg" >
					<img class="big" src="img/轮播图/大图/轮播大图5.jpg" >
					<img class="big" src="img/轮播图/大图/轮播大图6.jpg" >
					<!-- 轮播条 -->
					<div id="btns">
						<div class="btn" slide="0"></div>
						<div class="btn" slide="1"></div>
						<div class="btn" slide="2"></div>
						<div class="btn" slide="3"></div>
						<div class="btn" slide="4"></div>
						<div class="btn" slide="5"></div>
					</div>
				</div>
				<div id="smallImg">
					<div id="topImg">
						<img roll="0" src="img/轮播图/小图/1.png" alt="">
						<img roll="2" src="img/轮播图/小图/2.png" alt="">
						<img roll="4" src="img/轮播图/小图/3.png" alt="">
						<img roll="5" src="img/轮播图/小图/4.png" alt="">
					</div>
					<div id="downImg">
						<img roll="0" src="img/轮播图/小图/5.png" alt="">
						<img roll="2" src="img/轮播图/小图/6.png" alt="">
						<img roll="4" src="img/轮播图/小图/7.png" alt="">
						<img roll="5" src="img/轮播图/小图/8.png" alt="">
					</div>
				</div>
			</div>
		
		</div>
		<!-- 侧边栏 -->
		<div id="sideBar">
			<div class="opt">
				<img src="img/侧边栏/我.png" >
				<a href="#">会员权益</a><i class="fa fa-caret-right"></i>
			</div>
			<div class="opt" id="car">
				<img src="img/侧边栏/购物车.png" >
				<span>购物车</span>
			</div>
			<div class="opt" id="cart">
				<img src="img/侧边栏/资产.png" >
				<a href="#">我的资产</a><i class="fa fa-caret-right"></i>
			</div>
			<div class="opt">
				<img src="img/侧边栏/收藏.png" >
				<a href="#">我的收藏</a><i class="fa fa-caret-right"></i>
			</div>
			<div class="opt">
				<img src="img/侧边栏/时间.png" >
				<a href="#">我看过的</a><i class="fa fa-caret-right"></i>
			</div>
			<div class="opt">
				<img src="img/侧边栏/充值.png" >
				<a href="#">我要充值</a><i class="fa fa-caret-right"></i>
			</div>
			<div class="opt" id="back">
				<img src="img/侧边栏/反馈.png" >
				<a href="#">用户反馈</a><i class="fa fa-caret-right"></i>
			</div>
			<div class="opt" id="code">
				<img src="img/侧边栏/二维码.png" >
				<div id="qr">
					<img src="img/侧边栏/子菜单二维码.png" >
				</div>
			</div>
			<div class="opt" id="to">
				<img src="img/侧边栏/回到顶部.png" >
				<a href="#">返回顶部</a><i class="fa fa-caret-right"></i>
			</div>
			
		</div>
	</body>
</html>
